<template>
	<view class="weaper">
	    <view class="butomsearch">
	      <view class="serarchite">
	            <view class="title">网点名称</view>
	            <view class="flex wdd2">
	              <picker @change="bindPickerType" range-key="net_name"  :range="wddatalist">
	                  <view class="typicker" v-if="wdindex >= 0">
	                      {{wddatalist[wdindex].username}}
	                  </view>
	                  <view class="typicker" v-if="wdindex < 0">请选择 </view>
	              </picker>
	            </view>
	        </view>
			
	        <view class="serarchite">
	            <view class="title">出货日期</view>
	            <view class="wdd2">
	                <picker mode="date" :value="date"  @change="bindDateChange">
	                    <input class="inputser" type="text" v-if="date==''" 
						disabled="disabled" placeholder="请输入出货日期"/>
	                    <input class="inputser" type="text" v-if="date !=''" v-model="date"  
						 placeholder="请输入出货日期"/>
	                </picker>
	            </view>
	        </view>
	       
	        <view class="serarchite" >
	            <view class="title">箱码/罐码</view>
	            <view class="flex" style="width: 80%;">
	                 <input class="inputser" type="text" v-model="sncode" 
	                  placeholder="请输入产品箱码或罐码"/>
	                 <image src="https://ayh.wissun.net/static/ayh/saoyisao.png" class="cappppca" @click="saoyisao()"/>
	            </view>
	        </view>
	        <view class="searchbtn" @click="searchgetdata()">查询</view>
	    </view>
		<view class="nodata" v-if="datalist.length ==0">暂无数据</view>
	    <view class="frmand" v-for="(item,index) in datalist" >
	        <view class="itemna" style="display: flex;justify-content: space-between;">
	          <view class="flex">
	            <view class="aa">网点出货单号：</view>
	            <view>{{item.order_no}}  </view>
	          </view>
	          <view>{{index+1}}</view>
	        </view>
	        <view class="itemna">
	          <view class="aa">出货日期：</view>
	          <view>{{item.add_time}}</view>
	        </view>
	        <view class="itemna">
	          <view class="aa">网点编码：</view>
	          <view>{{item.wdbh}}</view>
	        </view>
	        <view class="itemna">
	          <view class="aa">网点名称：</view>
	          <view>{{item.wd_name}}</view>
	        </view>
	        <view class="itemna">
	          <view class="aa">产品箱码：</view>
	          <view>{{item.boxcode}}</view>
	        </view>
	        <view class="itemna">
	          <view class="aa">罐追溯码：</view>
	          <view>{{item.sncode}}</view>
	        </view>
	        <view class="itemna">
	          <view class="aa">产品编码：</view>
	          <view>{{item.product_code}}</view>
	        </view>
	        <view class="itemna">
	          <view class="aa">产品名称：</view>
	          <view>{{item.product_name}}</view>
	        </view>
	        <view class="itemna"> 
	          <view class="aa">产品规格：</view>
	          <view>{{item.product_size}}</view>
	        </view>
	        <view class="itemna">
	          <view class="aa">批次号：</view>
	          <view>{{item.batch}}</view>
	        </view>
	        <view class="itemna" v-if="item.custname">
	            <view class="aa">上级发货：</view>
	            <view>{{item.custname}}</view>
	         </view>
	         <view class="itemna" >
	            <view class="aa">发货状态：</view>
	            <view v-if="item.is_qianshou == 1">已签收</view>
				<view v-if="item.is_qianshou == 0">未签收</view>
	         </view>
	    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				size:5,
				wdbh:"",
				wdname:"",
				date:"",
				boxcode:"",
				sncode:"",
				wdindex:-1,
				datalist:[],
				wddatalist:[]
			}
		},
		onShow(){ this.getwdlistdata();this.searchgetdata();},
		onPullDownRefresh(){
			uni.stopPullDownRefresh()
		},
		onReachBottom(){
		  
		},
		methods: {
			//选择网点回调
			bindPickerType(e){
			  this.wdindex=e.detail.value
			},
			bindDateChange(e){
				this.date=e.detail.value
			},
			 //查询方法
			searchgetdata(){
				this.page=1
				this.datalist=[]
				this.getdata()
			},
			//扫罐底码
			saoyisao() {
				var that=this
				uni.scanCode({
					success: (res) => {
						if(res.errMsg=='scanCode:ok'){
							var tt=res.result.split("/")
							var trace_code="";
							if(tt.length > 2){
								trace_code=tt[tt.length-1]
							}else{
								trace_code=res.result;
							}
							that.sncode=trace_code
						}else{
							uni.showToast({ title: '识别失败！',icon:"none"})
						}
					}
				})
			},
			//获取网点列表信息
			getwdlistdata(){
			  var data={}
			  var that=this
			  data.jxs_code=uni.getStorageSync('fahuo_username').id;
			  this.request('/api/duoqudao/wdbh_list', data,"post").then(ret => {
					ret.data.map(p=>{
					   p.net_name=p.user_code+"  "+p.username
					})
					that.wddatalist=ret.data
			  })
			},
			getdata(){
				var data={}
			
				if(this.wdindex > -1){
					data.wdbh=this.wddatalist[this.wdindex].user_code
				}
				if(this.date){
					data.date=this.date
				}
				if(this.boxcode){
					data.boxcode=this.boxcode
				}
				if(this.sncode){
					data.sncode=this.sncode
				}
				var that=this
				data.page=this.page
				data.size=this.size
				
				data.jxs_code=uni.getStorageSync('fahuo_username').user_code;
				this.request('/api/duoqudao/fa_huo_shuyuan', data,"post").then(ret => {
					that.page++;
					that.datalist=ret.data;
				})
			},
		}
	}
</script>

<style>
.weaper{
  width: calc(100% - 40px);
  margin: 0 auto;
}
.nodata{
	text-align: center;
	margin-top: 120px;
	color: #999;
	font-size: 14px;
}
.frmand{
  font-size: 16px;
  margin-top: 20px;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.shuyuan{
  text-align: center;
  background-color: #1B764A;
  color: #fff;
  height: 35px;
  line-height: 35px;
  border-radius: 5px;
  margin-top: 20px;
}
.itemna{
  line-height: 24px;
  font-size: 14px;
  display: flex;
}
page{
  background-color: #eee;
  padding-bottom: 80px;
}
.serarchite{
  display: flex;
}
.inputser{
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #eee;
  border-radius: 5px;
  padding-left: 10px;
  width: 100%;
}
.serarchite{
  margin: 10px 0px;
}
.title{
  font-size: 14px;
  width: 68px;
  line-height: 34px;
}
.searchbtn{
  height: 32px;
  line-height: 32px;
  background-color: #1B764A;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  width: 40%;
  margin: 0 auto;
  margin-top: 20px;
}
.butomsearch{
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
}
.flex{
  display: flex;
}
.aa{
  color: #8e8e8e;
}
.cappppca{
  width:36px;
  height:30px;
  margin-top: 2px;
}
.wdd2{width: calc(100% - 80px);}
picker{
  width: 100%;
}
.typicker{
    line-height: 34px;
    border: 1px solid #eee;
    width: 100%;
    padding-left: 10px;
    font-size: 14px;
    color: rgb(133, 131, 131);}
</style>
